import React ,{useEffect,useRef}from 'react'
import {connect} from 'react-redux'
import {removeAction, ChangeAction} from '../actions'
 function TodoItem(props) {
    const {item , removeData,ChangeChecked} =props
    // 改变背景色
    const bankge = useRef('')
    
    useEffect(()=>{
        console.log('item添加成功')
        if(item.completed){
            bankge.current.className='over card-content'
        }else{
            bankge.current.className='card-content'
        }
       
    },[item.completed])
       
    return (
        <div className="card item"> 
            
        <div className="card-content " ref={bankge}  > 
        
          <div className="content" >
         { item.title } - { item.completed ? '已' : '未' }完成
          </div>
        </div>
        <footer className="card-footer">
          <a href="#" className="card-footer-item" onClick={()=> ChangeChecked(item.id)}>标记为{ item.completed ? '未' : '已' }完成</a>
          <a href="#" className="card-footer-item"  onClick={()=>removeData(item.id)}>删除</a>
            
        </footer>
          </div>  
     
    )
}
 const mapDispatchToProps= (dispatch)=>(
     {
        removeData(id) {
            dispatch(removeAction(id))
            
        },
        ChangeChecked(id){
            console.log(55555)
            dispatch( ChangeAction(id))
        }

     }
 )

export default connect(null, mapDispatchToProps)(TodoItem)
